http 请求方案：Ajax、Fetch、Axios

三者原理

1. Ajax 是一种技术统称：AJAX 是一种利用浏览器内置的 XMLHttpRequest（XHR）对象实现异步通信的技术，并非具体的 API
2. Fetch 是原生的网络请求API：现代浏览器原生提供的基于 Promise 的网络请求 API，旨在替代 XHR
3. Axios 基于 Promise 的第三方 HTTP 客户端库：可用于浏览器和 Node.js

三者对比

以下「HTTP 4xx/5xx 是否触发 catch」等表述，分别对应 Fetch 与 Axios 的默认语义，不要混为一谈。

1. AJAX

基于 XHR 对象：需手动创建和管理 XMLHttpRequest 实例。
回调地狱：使用回调函数处理响应，嵌套过多时代码难以维护。
兼容性：支持老旧浏览器（如 IE6/7）。

2. Fetch

基于 Promise：支持链式调用（.then()/.catch()），避免回调地狱。
更简洁的语法：直接使用 fetch(url, options)。
默认不携带 Cookie：需显式设置 credentials: 'include'。
错误处理：HTTP 错误（如 404/500）不会触发 catch，需手动检查 response.ok。
无原生请求取消：需结合 AbortController 实现。

3. Axios

自动转换 JSON 数据。
拦截请求和响应（interceptors）。
内置请求取消（通过 CancelToken 或 AbortController）。
跨浏览器兼容（包括旧版浏览器）。
支持上传/下载进度跟踪
HTTP 错误（如 404/500）会触发 catch。

AJAX 技术

AJAX 全称是 Async Javascript And XML，可以在不刷新页面的情况下与服务器交换数据，并更新部分网页

1. AJAX 原理 通过 XMLHttpRequest 对象向服务器发送异步请求，从服务器获得数据，然后操作 DOM 更新界面

2. AJAX 实现过程

创建 AJAX 实例 const xhr = new XMLHttpRequest()
通过 xhr.open() 方法与服务器建立连接
通过 xhr.send() 方法向服务器发送请求
通过 xhr.onreadystatechange() 事件监听服务端反馈
通过 xhr.status 属性判断状态
通过 xhr.responseText 属性获取结果

fetch 请求 API

1. get 请求

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json(); // 解析 JSON 数据
  })
  .then(data => {
    console.log(data); // 处理数据
  })
  .catch(error => {
    console.error('There was a problem with the fetch operation:', error);
  });

1. post 请求

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer your_token_here' // 如果需要认证
  },
  body: JSON.stringify({
    key1: 'value1',
    key2: 'value2'
  })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

1. async/await

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Fetch error:', error);
  }
}

fetchData();

1. 请求选项

fetch(url, {
  method: 'POST', // GET, POST, PUT, DELETE 等
  headers: {
    'Content-Type': 'application/json',
    'Custom-Header': 'Your-Value'
  },
  body: JSON.stringify(data), // 必须是字符串、FormData、Blob 等
  mode: 'cors', // no-cors, *cors, same-origin
  cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
  credentials: 'same-origin', // include, *same-origin, omit
  redirect: 'follow', // manual, *follow, error
  referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
});

1. 处理不同的响应类型

// 处理 JSON
fetch(url).then(response => response.json());

// 处理文本
fetch(url).then(response => response.text());

// 处理 Blob (二进制数据)
fetch(url).then(response => response.blob());

// 处理 ArrayBuffer
fetch(url).then(response => response.arrayBuffer());

1. 取消 fetch

const controller = new AbortController();
const signal = controller.signal;

fetch('https://api.example.com/data', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Fetch aborted');
    } else {
      console.error('Error:', error);
    }
  });

// 取消请求
controller.abort();

---

Ajax 是什么？原理？实现？

Ajax

AJAX 本质：异步数据交互技术，核心是 XMLHttpRequest/fetch 对象，实现页面局部更新（在页面不刷新的情况下实现前后端交互）

# 详细
AJAX 是 Asynchronous JavaScript and XML（异步 JavaScript 和 XML）的缩写，它并不是一种新的编程语言，而是一种前端技术方案
核心作用：在不刷新整个页面的前提下，实现浏览器与服务器的异步数据交互（比如页面下拉加载、表单实时验证、搜索框联想）。
关键特点：异步（请求发送后不阻塞页面其他操作）、局部更新（只更新页面需要变化的部分）。

原理

创建异步对象 → 配置请求 → 监听状态 → 发送请求 → 处理响应；

# 详细
AJAX 的核心是浏览器内置的 XMLHttpRequest（XHR）对象（或现代的 fetch API），整个异步交互流程如下：
1. 创建异步对象：通过 XMLHttpRequest 或 fetch 创建用于通信的对象；
2. 配置请求信息：指定请求方式（GET/POST）、请求地址、是否异步等；
3. 监听状态变化：监听对象的状态（如请求发送中、响应完成）和响应结果；
4. 发送请求：将请求发送到服务器；
5. 处理响应：服务器返回数据后，通过回调函数处理数据，并更新页面局部内容；
6. 整个过程中，浏览器主线程不会被阻塞，页面可正常交互。

实现

传统 XHR（重点）、现代 fetch（Promise 风格）、框架封装（axios，开发常用）

# 详细
方式 1：传统 XMLHttpRequest（兼容所有浏览器，常见）
方式 2：现代 fetch API（Promise 风格，更简洁）